"use client";
import style from "./page.module.scss";
import React, { useEffect, useState } from "react";
import { getApply } from "@/api";
import { List, Popover, Space, Tooltip, Typography } from "antd";
import { useRouter } from "next/navigation";
import { InfoCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons";
interface IMyApply {
  applyId: number;
  subjectName: string;
  applicationName: string;
  applicantId: number;
  subjectId: number;
  publishName: string;
  applyStatus: string;
  cause: string;
  // TODO:申请原因
  applyCause: string;
}
const MyApply = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<IMyApply[]>([]);
  const router = useRouter();
  const [pgn, setPgn] = useState({
    current: 1,
    pageSize: 10,
  });
  const getData = async () => {
    setLoading(true);
    const res = await getApply({
      pageNum: pgn.current,
      pageSize: pgn.pageSize,
    });
    setData(res.data.data.records);
    setLoading(false);
  };
  const handleClickItem = (id: number) => {
    router.push(`/VedioContentView?videoId=${id}`);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <List
        className={style["list"]}
        loading={loading}
        dataSource={data}
        renderItem={(item) => (
          <List.Item
            className={style["listItem"]}
            onClick={() => handleClickItem(item.subjectId)}
          >
            <Typography.Text mark>{item.subjectName}</Typography.Text>
            <Space>
              <Space>
                <span className={style["operation"]}>查看申请理由</span>
                <Popover content={<p>{item.applyCause}</p>} title="申请理由">
                  <InfoCircleOutlined className={style["operation"]} />
                </Popover>
              </Space>
              <span className={style["operation"]}>申请状态：</span>
              <span className={style["operation"]}>
                {item.applyStatus === "0" ? (
                  "申请中"
                ) : item.applyStatus === "1" ? (
                  "已通过"
                ) : (
                  <Space>
                    <Popover content={<p>{item.cause}</p>} title="原因">
                      <QuestionCircleOutlined className={style["operation"]} />
                    </Popover>
                    <span className={style["operation"]}>未通过</span>
                  </Space>
                )}
              </span>
            </Space>
          </List.Item>
        )}
      />
    </div>
  );
};
export default MyApply;
